import React, {Component, PropTypes} from 'react';
import {Tree, Icon} from 'antd';
import Signals from 'signals';
import { Scrollbars } from 'react-custom-scrollbars';

import {getImage, getStatusImage} from "../../services/showServer";
import ImageStatusCheckContainer from "../../components/Checkbox/ImageStatusCheckContainer"

const TreeNode = Tree.TreeNode;


function strSub(str) {
  if (str != null) {
    if (str.length > 40) {
      return str.substring(0, 40) + "...";
    } else {
      return str;
    }
  }
}

class ImageTreeContainer extends Component {
  constructor(props) {
    super(props);
    //signals事件
    this.signal = new Signals.Signal();
    this.state = {
      status: '11111',
      treeData: {
        "servers": [],
      }
    }
  }

  onSelect(info) {
    this.props.signal.dispatch(info[0]);
  }

  refreshData() {
    getStatusImage(this.state.status).then(function (json) {
      if (json.servers) {
        this.setState({
          treeData: json
        });
      }
    }.bind(this));
  }

  componentWillMount() {
    this.signal.add(function (status) {
      getStatusImage(status).then(function (json) {
        if (json.servers) {
          this.setState({
            status: status,
            treeData: json
          });
        }
      }.bind(this));
    }.bind(this));
  }

  componentWillUnmount() {
    this.signal.removeAll();
  }

  componentDidMount() {
    getImage().then(function (json) {
      if (json.servers) {
        this.setState({
          treeData: json
        });
      }
    }.bind(this));
  }

  getColor(type) {
    if (type == 11 || type == 31 || type == 51) {
      return {color: '#87D068'};
    } else if (type == 12 || type == 32 || type == 52) {
      return {color: '#2DB7F5'};
    } else if (type == 13 || type == 33 || type == 53) {
      return {color: '#FF5500'};
    } else if (type == 22 || type == 42 || type == 62) {
      return {color: '#FFAA00'};
    } else {
      return {color: '#000000'};
    }
  }

  render() {
    const ServerLoop = data => data.map((item) => {
      if (item.dbs) {
        return <TreeNode title={<span style={this.getColor(item.status)}><Icon type="home"/>&nbsp;&nbsp;&nbsp;{strSub(item.name)}</span>}
                         key={item.id}>{DBLoop(item.dbs)}</TreeNode>;
      }
      return <TreeNode title={<span style={this.getColor(item.status)}><Icon type="home"/>&nbsp;&nbsp;&nbsp;{strSub(item.name)}</span>}
                       key={item.id}></TreeNode>;
    });

    const DBLoop = data => data.map((item) => {
      if (item.tables) {
        return <TreeNode title={<span style={this.getColor(item.status)}><Icon type="hdd"/>&nbsp;&nbsp;&nbsp;{strSub(item.name)}</span>}
                         key={item.id}>{TableLoop(item.tables)}</TreeNode>;
      }
      return <TreeNode title={<span style={this.getColor(item.status)}><Icon type="hdd"/>&nbsp;&nbsp;&nbsp;{strSub(item.name)}</span>}
                       key={item.id}></TreeNode>;
    });

    const TableLoop = data => data.map((item) => {
      return <TreeNode title={<span style={this.getColor(item.status)}><Icon type="file-text"/>&nbsp;&nbsp;&nbsp;{strSub(item.name)}</span>}
                       key={item.id}></TreeNode>;
    });

    const treeNodes = ServerLoop(this.state.treeData.servers);

    return (
      <div>
        <ImageStatusCheckContainer signal={this.signal} ref="check"/>
        <Scrollbars style={{ width: 350, height: 660 }}
                    autoHide={true}
                    autoHideTimeout={1000}
                    autoHideDuration={200}
                    thumbMinSize={30}
                    universal={true}>
          <Tree className="image" 
                onSelect={this.onSelect.bind(this)}
          >
            {treeNodes}
          </Tree>
        </Scrollbars>
      </div>
    );
  }
}

export default ImageTreeContainer;
